<template>
<div>
	<div class="login" id="login" :style="{height:height+'px'}">
	    <div class="log-bg">
	        <div class="log-logo">Welcome!</div>
	    </div>
	    <div class="log-phone">
	    	<div class="inputDiv">
	    		<img class="ico" src="../assets/img/call20.png" alt="" />
	    		<input class="text" type="text" :class="!checkPhone?'error':''" placeholder="请输入您的手机号"  v-model="phone">
	    	</div>
	        <div class="inputDiv">
	        	<img class="ico" src="../assets/img/unlock17.png" alt="" />
	        	<input class="text" type="text" :class="!checkCode?'error':''" placeholder="请输入短信验证码" v-model="verificationCode " style="width:68%">
	        	<button class="btn r getCodeBtn" :class="!btnFlag?'color_999':''" style="width:28%">{{btnText}}</button>
	        </div>
	        <div class="inputDiv">
	        	<button class="btn" @click="login">登陆</button>
	        </div>
	    </div>
	    <div class="loginBtn">
			<span class="title"><span>第三方账号登陆</span></span>
			<a class="icon-qq"></a>
			<a class="icon-wechat"></a>
		</div>
	</div>
	<div class="divDialog">
		<h4 class="dialogTitle">系统消息</h4>
		<div class="dialogContent">
			<div class="usualMessage">
			</div>
		</div>
		<div class="dialogClose">取消</div>
	</div> 
</div>

</template>

<script>
export default {
  name: 'Login',
  data(){
  	return {
  		phone: '',
  		verificationCode : '',
  		checkPhone:true,
  		checkCode:true,
  		btnFlag:true,
  		btnText:"获取验证码",
  		time:10,
  		height:450
  	}
  },
  watch:{
    "$route"(val, oldVal){
    	console.log(val);
    },
  },
   mounted() {
		this.init();
	},
  methods:{
  	init(){
  		var _this = this;
  		_this.height = window.innerHeight;
  		$(".divDialog .dialogClose").on("click",function(){
  			_this.checkPhone = true;
  			_this.checkCode = true;
  		});
  		
  		$(".getCodeBtn").on("click",function(){
  			if(_this.btnFlag){
  				var indexTime = null;
	  			if(_this.checkPhoneFun()){
	  				_this.btnText = _this.time+"s";
	  				_this.btnFlag = false;
	  				indexTime =  setInterval(()=>{
	  					if(_this.time > 0){
	  						_this.time--;
	  						_this.btnText = _this.time+"s";
	  					}else{
	  						clearInterval(indexTime);
	  						_this.btnFlag = true;
	  						_this.btnText = "获取验证码";
	  					}
	  					
	  				},1000);
	  				
		  		}else{
		  			return false;
		  		}
  			}
  			
  		});
  	},
  	checkPhoneFun(){
  		var _this = this;
  		if(_this.phone =='' || !/^1\d{10}$/.test(_this.phone)){
  			$(".dialogContent .usualMessage").empty().append('<span style="color:red;">请输入正确手机号</span>');
  			_this.checkPhone = false;
  			_this.openDialog();
  			return false;
  		}else{
  			return true;
  		}
  	},
  	checkCodeFun(){
  		var _this = this;
  		if(_this.verificationCode == ''){
  			$(".dialogContent .usualMessage").empty().append('<span style="color:red;">请输入正确的短信验证码</span>');
  			_this.checkCode = false;
  			_this.openDialog();
  			return false;
  		}else{
  			return true;
  		}
  	},
  	
  	//登录逻辑
  	login(){
  		var _this = this;
  		if(_this.checkPhoneFun() && _this.checkCodeFun()){
  			$(".dialogContent .usualMessage").empty().append('<div class="dropload-load"><span>正在登录请稍后</span></div>');
  			_this.openDialog();
  			_this.toLogin();
  		}
  	},

  	//登录请求
  	toLogin(){

  		//一般要跟后端了解密码的加密规则
  		//这里例子用的哈希算法来自./js/sha1.min.js
  		//let password_sha = hex_sha1(hex_sha1( this.password ));

  		//需要想后端发送的登录参数
  		let loginParam = {
  			phone: this.phone,
  			verificationCode : this.verificationCode
  		}

      //设置在登录状态

  		//请求后端,比如:
  		/*this.$http.post( 'example.com/login.php', {
  		param: loginParam).then((response) => {
        if(response.data.code == 1){
          let expireDays = 1000 * 60 * 60 * 24 * 15;
          this.setCookie('session', response.data.session, expireDays);
          //登录成功后
          this.$router.push('/user_info'); 
        }
	    }, (response) => {
	        //Error
	    });
  		*/
  	   
      //演示用
  		setTimeout(()=>{
        //登录状态15天后过期
        let expireDays = 1000 * 60 * 60 * 24 * 15;
  		this.setCookie('session','blablablablabla...', expireDays);
        //登录成功后
  		this.$router.push('/');
  		this.closeDialog()
  		},2000)
  	},
	openDialog(){
		$(".usualMessage").show();
		$(".dialogTitle").empty().append("系统消息");
		$(".dialogMask").fadeIn();
		$(".divDialog").fadeIn();
	},
	closeDialog(){
		$(".dialogMask").fadeOut();
		$(".divDialog").fadeOut();
	}
  }
}
</script>

<style>
.login{background: #fff;}
.log-logo{height: 80px;text-align: center; color: red; font-weight: bold; font-size: 40px;line-height:80px;padding-top:60px;}
.log-phone {padding:15px;}
.log-text{color: #57d4c3; font-size: 13px; text-align: center; margin: 0 auto;}
.inputDiv {width: 100%; margin: 15px 0;position: relative;}
.inputDiv .ico {position: absolute; width: 20px; top: 6px; left: 5px;}
.inputDiv .text{color: #999; background: none; text-indent: 31px; outline: none; width: 100%; height: 31px; line-height: 35px; border-radius: 5px; border: 1px solid #ddd;}
.inputDiv .btn {height: 33px; background: red; color: #fff; border: none; border-radius: 5px; width:100%;outline:none;font-size:1.23em;}
.loginBtn a { position: relative; display: inline-block; width: 40px; height: 40px; font-size: 25px; border-radius: 50%; line-height: 40px; border: 1px solid red; color: red; text-align: center; vertical-align: middle; transition: background 0.6s ease-out 0s; font-family: socialshare!important; margin: 0px 20px;}
.loginBtn a.icon-qq:before{content: "\F11A";}
.loginBtn a.icon-wechat:before{content: "\F09A";}
.loginBtn {width: 70%; margin: 0px auto; border-top: 1px solid #ddd; padding-top: 35px; position: relative;text-align:center;margin-top: 35px;}
.loginBtn .title { position: absolute; color: #999; font-size: 1.5em; top: -9px; width: 100%; text-align: center;left:0;}
.title span {background:#fff;padding:0 15px;}
.inputDiv .error {border-color:red;} 
.log-phone .btn.color_999 {background:#999;}
</style>
